<template>
  <div class="searchDetail">
    <div class="searchDetailContent">
    <div class="searchInp">
      <van-search @click="toSearch" v-model="value" disabled :placeholder="keyword" />
    </div>

    <!-- 头部 -->
    <div class="header">
      <div class="headerLeft" :class="{'active':active===1}" @click="allDetail(1)">综合</div>
      <div class="headerCenter" @click="showPrice(2)" :class="{'active':active===2}">
        价格
        <div class="centerArrow">
          <van-icon class="arrow" :class="{ active: sortType === 1 }" name="arrow-up" />
          <van-icon class="arrow" :class="{ active: sortType === 2 }" name="arrow-down" />
        </div>
      </div>
      <div class="headerRight" :class="{'active':active===3}" @click="showCategory(3)">分类</div>
      <!-- 价格弹出框 -->
      <div class="showPrice" v-show="isPrice">
        <div class="price">
          <div class="priceText">筛选</div>
          <input type="number" v-model="upperPrice" style="width: 120px; height: 23px; text-align: center" placeholder="最低价" />
          <div class="line"></div>
          <input type="number" v-model="floorPrice" style="width: 120px; height: 23px; text-align: center" placeholder="最高价" />
        </div>

        <div class="order">
          <div class="orderText">排序</div>
          <van-button class="btn" :class="{ active: sortType === 1 }" size="small" @click="order(1)">从低到高</van-button>
          <van-button class="btn" :class="{ active: sortType === 2 }" size="small" @click="order(2)">从高到低</van-button>
        </div>
        <div class="footer">
          <van-button class="btn" plain @click="priceCancel">取消</van-button>
          <van-button class="priceConfirm" plain @click="priceConfirm">确定</van-button>
        </div>
      </div>
      <!-- 分类弹出框 -->
      <div class="category" v-show="isCategory">
        <div class="categoryItem" v-for="(c1, index) in categoryList" :key="c1.id" @click="getSearchDetail(index, c1.id)">
          <van-tag :class="{ active: currentIndex === index }" class="categoryTag" plain>{{ c1.name }}</van-tag>
        </div>
        <div class="categoryBtn">
          <van-button class="btn" plain @click="categoryCancel">取消</van-button>
        </div>
      </div>
    </div>
  </div>
    <!-- 搜索详情内容 -->
    <div class="detailContent">
      <div class="detailItem" v-for="detail in detailList" :key="detail.id">
        <div class="detailImg">
          <img class="img" :src="detail.listPicUrl" alt="" />
        </div>
        <div class="detailTitle">
          <img class="titleImg" :src="detail.preLogo[0].logoUrl" alt="" />
          {{ detail.name }}
          <!-- <div class="title">{{detail.name}}</div> -->
        </div>
        <div class="detailPrice">
          <div class="left">￥{{ detail.retailPrice }}</div>

          <div class="right">￥{{ detail.sortOriginPrice }}</div>
        </div>
        <div class="discount" v-show="detail.finalPriceInfoVO?.banner?.content">
          <div class="left">{{ detail.finalPriceInfoVO?.banner?.title }}</div>
          <div class="right">{{ detail.finalPriceInfoVO?.banner?.content }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {};
</script>

<script lang="ts" setup>
import { onMounted, ref, computed,onBeforeUnmount } from 'vue';
import { useSearchStore } from '@/store/modules/search';
import { useRoute, useRouter } from 'vue-router';
import { Toast } from 'vant';
const value = ref<string>('');
const upperPrice = ref<number>();
const floorPrice = ref<number>();
const sortType = ref<number>();
const searchStore: any = useSearchStore();
const route = useRoute();
const router = useRouter();
const isPrice = ref<boolean>(false);
const isCategory = ref<boolean>(false);
const currentIndex = ref<number>(0);
const keyword = ref<any>('')
const active = ref<number>(1)
//点击价格
const showPrice = (num:number) => {
  isPrice.value = !isPrice.value;
  isCategory.value = false;
  active.value=num
};
//点击分类
const showCategory = (num:number) => {
  isCategory.value = !isCategory.value;
  isPrice.value = false;
  active.value=num
};
onMounted(() => {
  searchStore.getSearchInfo(route.query.keywordPrefix);
  keyword.value = route.query.keywordPrefix
  handleScroll()
});
// 计算商品详情
let detailList= computed(() => {
  return (searchStore.searchDetailInfo||{}).directlyList||[];
});
//  计算分类 tag 标签数据
const categoryList = computed(() => {
  return searchStore.searchDetailInfo.categoryL1List;
});
// 点击去搜索页面
const toSearch = () => {
  router.push('/search');
};
// 点击价格 取消按钮
const priceCancel = () => {
  isPrice.value = false;
};
// 点击 分类 取消按钮
const categoryCancel = () => {
  isCategory.value = false;
};
//点击综合
const allDetail = (num:number) => {
  searchStore.getSearchInfo(route.query.keywordPrefix);
  active.value = num
  isPrice.value = false;
  isCategory.value = false;
};

//点击 排序 由低到高
const order = (sum: number) => {
  sortType.value = sum;
  
};
// 点击价格 确认
const priceConfirm = () => {
  if (upperPrice.value && floorPrice.value && sortType.value && route.query.keywordPrefix) {
    if (sortType.value !== 1) {
      sortType.value=0
    }
    searchStore.getSearchPrice(upperPrice.value, floorPrice.value, sortType.value, route.query.keywordPrefix);
    isPrice.value = false;
  } else {
    // console.log(sortType.value);
    
    Toast({
      message: '请选择价格排序',
      position: 'top'
    });
  }
};
//点击 tag 标签
const getSearchDetail = (index: number, id: number) => {
  currentIndex.value = index;
  searchStore.getSearchCategory(id, route.query.keywordPrefix);
  isCategory.value = false;
};

// 底部提醒
const handleScroll = () => {
  window.addEventListener("scroll", () => {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
    
    if (scrollHeight-scrollTop-windowHeight<1) {
      Toast({
      message: '已经到底部啦~~~',
      position: 'top'
    });
    }
  })
}

onBeforeUnmount(() => {
  window.removeEventListener("scroll", () => { })
}
)
</script>

<style lang="less" scoped>
.searchDetail {
  position: relative;
  .searchDetailContent{
    position: fixed;
    width: 100%;
    z-index: 9999;
    background-color: #fff;
  .searchInp{
    width: 100%;
    // position: fixed;
    top: 0;
  }
  .header {
    font-size: 16px;
    display: flex;
    height: 40px;
    align-items: center;
    background-color: #fafafa;
    border-bottom: 1px solid #e2e2e2;
    box-sizing: border-box;
    position: relative;

    .headerLeft {
      width: 33.33333%;
      text-align: center;
      &.active{
        color: red;
      }
    }
    .headerCenter {
      flex: 1;
      display: flex;
      width: 33.33333%;
      justify-content: center;
      &.active{
        color: red;
      }
      .centerArrow {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        color: #d6d6d6;
        margin-left: 5px;
        .arrow {
          &.active {
            color: red;
          }
        }
      }
    }
    .headerRight {
      width: 33.33333%;
      text-align: center;
      &.active{
        color: red;
      }
    }
    .showPrice {
      padding: 20px 15px 0 15px;
      position: absolute;
      top: 40px;
      left: 10px;
      background-color: #fff;
      .price {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        .priceText {
          font-size: 16px;
          margin-right: 5px;
        }
        .line {
          width: 15px;
          height: 1px;
          background-color: #b3b3b3;
          margin: 0 10px;
        }
      }
      .order {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .orderText {
          font-size: 18px;
          margin-right: 15px;
        }
        .btn {
          margin-right: 15px;
          width: 100px;
          font-size: 14px;
          border-color: black;

          &.active {
            border-color: red;
          }
        }
      }
      .footer {
        .btn {
          width: 50%;
          border-color: #ececec;
        }
        .priceConfirm {
          width: 50%;
          border-color: #ececec;
          color: red;
        }
      }
    }
    .category {
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      top: 40px;
      left: 10px;
      background-color: #fff;
      width: 100%;
      padding-top: 20px;
      .categoryItem {
        margin-right: 20px;
        margin-bottom: 20px;
        .categoryTag {
          height: 30px;
          font-size: 14px;
          &.active {
            border-color: red;
            color: red;
          }
        }
      }
      .categoryBtn {
        width: 100%;
        // border-top: 1px solid ;
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
        padding-bottom: 20px;
        .btn {
          width: 100px;
        }
      }
    }
  }
  }
  .detailContent {
    padding: 10px 15px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    position: absolute;
    top: 84px;
    &::after{
        content: '';
        width: 48%;
      }
    .detailItem {
      width: 48%;
      height: 301px;
    
      .detailImg {
        .img {
          width: 100%;
          height: 172px;
        }
      }
      .detailTitle {
        margin-top: 0.16rem;
        line-height: 0.45rem;
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #12161c;
        font-family: PingFangSC-Regular;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;

        .titleImg {
          width: 44px;
          height: 17px;
          margin-right: 5px;
        }
        .title {
        }
      }
      .detailPrice {
        display: flex;
        font-size: 18px;
        align-items: baseline;
        margin-bottom: 10px;
        .left {
          color: red;
          font-weight: bold;
        }
        .right {
          font-size: 12px;
          text-decoration: line-through;
          color: #aaaaaa;
        }
      }
      .discount {
        font-size: 11px;
        display: flex;
        width: 100%;
        height: 19px;
        background-color: #ffe9eb;
        // justify-content: center;
        align-items: center;
        border-radius: 10px;
        .left {
          width: 50px;
          background-color: red;
          border-radius: 10px;
          text-align: center;
          color: #fff;
          margin-right: 3px;
        }
      }
    }
  }
}
</style>
